<template>
  <div class='not-single talk_list wide' id='not-app-article'>
    <main class="site-main" role="main">
      <header class="page-header">
        <h1 class="post-title uppercase">{{ t('titles.talks') }}</h1>
        <div class='taxonomy-des'>
          <p>就算日落，也有一万种色彩。</p>
        </div>
      </header>
      <div class="post_box say">
        <article
          class="entry-preview"
          v-for="item in talks"
          :key="item.id"
          @click="toTalk(item.id)">
          <div class='thumbnail_box'>
            <a class='thumbnail' href='#' rel="bookmark">
              <img v-show='item.imgs[0]' :src='item.imgs[0]' alt='thumbnail'>
            </a>
          </div>
          <div class="entry-thyuupost">
            <header class='entry-header'>
              <time class="post-time" :datetime="item.createTime">{{ item.createTime.split('T')[0] }}</time>
              <h6 class='entry-title'>
                <span>{{ item.content }}</span>
              </h6>
            </header>
            <footer class='entry-meta'>
              <!-- todo -->
            </footer>
          </div>
        </article>
      </div>
    </main>
    <Paginator
      :pageSize="pagination.size"
      :pageTotal="pagination.total"
      :page="pagination.current"
      @pageChange="pageChangeHanlder" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import Breadcrumb from '@/components/Breadcrumb.vue'
import Paginator from '@/components/Paginator.vue'
import Avatar from '../components/Avatar.vue'
import { v3ImgPreviewFn } from 'v3-img-preview'
import { useRouter } from 'vue-router'
import api from '@/api/api'
import SvgIcon from '@/components/SvgIcon/index.vue'

export default defineComponent({
  name: 'talkList',
  components: { SvgIcon, Breadcrumb, Paginator, Avatar },
  setup() {
    const { t } = useI18n()
    const router = useRouter()
    const pagination = reactive({
      size: 8,
      total: 0,
      current: 1
    })
    const reactiveData = reactive({
      images: [] as any,
      talks: '' as any
    })
    onMounted(() => {
      fetchTalks()
    })
    const handlePreview = (index: any) => {
      v3ImgPreviewFn({ images: reactiveData.images, index: reactiveData.images.indexOf(index) })
    }
    const fetchTalks = () => {
      const params = {
        current: pagination.current,
        size: pagination.size
      }
      api.getTalks(params).then(({ data }) => {
        reactiveData.talks = data.data.records
        pagination.total = data.data.count
        reactiveData.talks.forEach((item: any) => {
          if (item.imgs) {
            reactiveData.images.push(...item.imgs)
          }
        })
      })
    }
    const formatTime = (data: any): string => {
      let hours = new Date(data).getHours()
      let minutes = new Date(data).getMinutes()
      let seconds = new Date(data).getSeconds()
      return hours + ':' + minutes + ':' + seconds
    }
    const toPageTop = () => {
      window.scrollTo({
        top: 0
      })
    }
    const pageChangeHanlder = (current: number) => {
      reactiveData.talks = ''
      toPageTop()
      pagination.current = current
      fetchTalks()
    }
    const toTalk = (id: any) => {
      router.push({ path: '/talks/' + id })
    }
    return {
      pagination,
      ...toRefs(reactiveData),
      formatTime,
      pageChangeHanlder,
      handlePreview,
      toTalk,
      t
    }
  }
})
</script>

<style lang="scss" scoped>
.post_box.say .entry-preview:hover {
  --font-color-hsl: 0deg 0% 100%;
  --font-color-alpha: .9;
  --color-rgb: 255 255 255;
  --color-sub-rgb: 255 255 255;
}
.post_box {
  display: grid;
  grid: auto / repeat(auto-fill, minmax(min( 25rem , 100%), 1fr));
  align-content: center;
  gap: var(--gap-divs);
}
@media (min-width: 1153px){
  .wide .post_box {
    grid-area: 1 / 2 / 2 / 3;
  }
}
.entry-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--w-bg);
  box-shadow: var(--box-shadow-white);
  transition: .5s;
}
.thumbnail_box {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5;
}
.post_box.say .thumbnail_box {
  position: absolute;
  height: 100%;
  opacity: 0;
  transition: .5s;
}
.post_box.say .entry-preview:hover .thumbnail_box{
  opacity: 1;
}
.thumbnail {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  transform: rotate(0deg);
  background: rgb(0 0 0 / 50%);
  opacity: 1;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: .5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.entry-preview:hover .thumbnail img {
  transform: scale(1) translate3d(0, 0, 0);
  filter: blur(10px) brightness(.8);
}
.thumbnail::before, .thumbnail::after {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'iconfont';
  position: absolute;
  overflow: hidden;
  text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
}
.thumbnail::before {
  content: "\ec2a";
  color: #ffffff80;
  font-size: 2rem;
}
.thumbnail::after {
  content: "\e627";
  width: 70%;
  border: 1px solid rgba(255,255,255,.75);
  opacity: 0;
  height: 70%;
  transition: .5s;
  z-index: 2;
  color: white;
  border-radius: var(--radius);
  font-size: 1rem;
}
.entry-preview:hover .thumbnail::after {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.entry-thyuupost {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: auto;
  padding: var(--gap-divs);
  gap: 1em;
  border-radius: var(--radius);
  z-index: 2;
  transition: .5s;
}
.post_box.say .entry-thyuupost {
  padding: 3rem;
  justify-content: center;
}
.post_box.say .entry-thyuupost::before {
  content: "\e65d";
  font-family: 'iconfont';
  font-size: 1rem;
  line-height: 1;
  color: hsl(var(--font-color-hsl) / .2);
}
.entry-header{
  font-family: var(--top-font-family);
}
.entry-header .entry-title{
  cursor: pointer;
}
.post_box.say .entry-preview:hover .thumbnail::after {
  border: none;
  color: #0000;
  text-shadow: none;
}
.entry-header span,.post-time{
  color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
}
.post-time {
  --font-color-alpha: 60%;
  font-size: var(--font-size-small);
  margin-bottom: 0.5rem;
}
.entry-preview .entry-meta {
  position: relative;
  display: flex;
  font-size: var(--font-size-small);
  gap: var(--gap-span);
}
</style>
